<template>
    <div class="main">
        <div class="mtxt">
            <p>关于机知 > 
                <a href="###" v-if="txt == 2">机智软件</a>
                <a href="###" v-else-if="txt == 3">会员中心</a>
                <a href="###" v-else-if="txt == 4">软件定制</a>
                <a href="###" v-else>指标大全</a>
            </p>
            <div class="mttxt">
                <ul class="mleft">
                    <li class="mh">
                        产品中心
                    </li>
                    <li v-on:click="txt = 1" :class="[{txt: txt === 1}]"><a href="###">指标大全</a><img v-bind:src="you" class="you"></li>
                    <li v-on:click="txt = 2" :class="[{txt: txt === 2}]"><a href="###">机智软件</a><img v-bind:src="you" class="you"></li>
                    <li v-on:click="txt = 3" :class="[{txt: txt === 3}]"><a href="###">会员中心</a><img v-bind:src="you" class="you"></li>
                    <li v-on:click="txt = 4" :class="[{txt: txt === 4}]"><a href="###">软件定制</a><img v-bind:src="you" class="you"></li>
                </ul>
                <div class="right" v-show="txt === 1"><Maina></Maina></div>
                <div class="right" v-show="txt === 2"><Mainb></Mainb></div>
                <div class="right" v-show="txt === 3"><Mainc></Mainc></div>
                <div class="right" v-show="txt === 4"><Maind></Maind></div>
            </div>
        </div>
    </div>
</template>

<script>
import Maina from '@/homework/Jz/Maina';
import Mainb from '@/homework/Jz/Mainb';
import Mainc from '@/homework/Jz/Mainc';
import Maind from '@/homework/Jz/Maind';
import you from '@/assets/11-27jz5158/you.png';
export default {
    components:{Maina,Mainb,Mainc,Maind},
    data(){
        return {
            txt: 1,
            you: you,
            mxian: 'xian',
        }
    }
}
</script>
<style lang="scss">
*{margin: 0;padding: 0;}
ul,ol,dl{list-style: none;}
a{text-decoration: none;}
.main{
    width: 100%;
    height: 1490px;
    background: #f2f2f2;
    .mtxt{
        width: 70%;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 50px 0 120px;
        p{
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            font-size: 16px;
            color: #333333;
            a{
                color: #333333;
            }
        }
        .mttxt{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            ul.mleft{
                width: 17%;
                height: 267px;
                background: #ffffff;
                margin-top: 10px;
                li{
                    padding: 5px 0 5px 15px;
                    border-bottom: 1px solid #dadade;
                    line-height: 40px;
                    .you{
                        float: right;
                        margin-top: 14px;
                        margin-right: 20%;
                        display: none;
                    }
                    a{
                        font-size: 16px;
                        color: #000000;
                    }
                }
                li.mh{
                    padding: 20px 0 20px 15px;
                    color: #333333;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 22px;
                }
                li.txt{
                    img{
                        display: block;
                    }
                    a{
                        color: #e4393c;
                    }
                }
            }
            .right{
                width: 78%;
                margin-top: 10px;
                background: #ffffff;
                div{
                    overflow: hidden;
                    h2{
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        margin: 20px 0 30px;
                        font-size: 30px;
                        color: #333333;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}
</style>